<template>
	<app-layout>
		<view class="tn-bg-white">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>身份核验</tn-nav-bar>
			<view class="login">
				<view class="login__wrapper">
					<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
						<!-- 用户信息 -->
						<view class="userinfo">
							<view class="tn-margin-bottom-sm">
								拍摄人脸，请确保正对手机，光线充足
							</view>
							<view v-if="xduser">当前核验：{{xduser.username}}</view>
						</view>
						<view v-show="faceimg"
							class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
							<image class="user_pic" :src="xduser&&xduser.face ||'/static/face.png'" mode="aspectFill">
							</image>
							<view class="tn-color-blue">正在核验中</view>
						</view>
						<view v-show="!faceimg" @click="showloading">
							<tn-image-upload ref="upload" :formData="formData" :action="action" @on-error="uperror"
								:customBtn="true" :isdd="isdd" :autoUpload="!!1" @on-change="upchange"
								@on-success="upsuccess" @on-choose-complete="choosecomplete"
								:showUploadList="setting.showUploadList" :sourceType="setting.sourceType">
								<view slot="addBtn"
									class="tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
									<image class="user_pic" :src="xduser&&xduser.face ||'/static/face.png'"
										mode="aspectFill"> </image>
									<view class="facebtn tn-bg-blue tn-color-white">人脸核验</view>
									<view class="tn-color-blue" hover-class="tn-hover" @click.stop="goBack">待会再试</view>
								</view>
							</tn-image-upload>
						</view>
						<view v-if="showagain==1 &&xduser && xduser.again==1">
							<view v-show="againimg">
								<view class="facebtn tn-margin-top-sm tn-bg-green tn-color-white">
									重新采集头像</view>
							</view>
							<view v-show="!againimg">
								<tn-image-upload ref="editf" :formData="formData" :action="action" @on-error="uperror2"
									:customBtn="true" :isdd="isdd" :autoUpload="!!1"  @on-success="editface" 
									:showUploadList="setting.showUploadList" :sourceType="setting.sourceType">
									<view slot="addBtn" class="facebtn tn-margin-top-sm tn-bg-green tn-color-white">
										重新采集头像</view>
								</tn-image-upload>
							</view>
						</view>
						
					<!-- <view class="facebtn tn-margin-top-sm tn-bg-orange tn-color-white" @click.stop="breakcheck">
							测试阶段跳过核验</view> -->
					</view>
				</view>
			</view>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'check',
		mixins: [template_page_mixin],
		data(){
			return {
				setting: {
					sourceType: ['camera'],
					showUploadList: false
				},
				action: this.$api.upload.index,
				checkid: null,
				xduser: null,
				formData: {},
				faceimg: '',
				againimg: '',
				checktype: '',
				isopencar: false,
				showagain: false,
			}
		},
		computed: {
			...mapState({
				userinfo: state => state.userinfo,
				return_url: state => state.return_url,
			})
		},
		onLoad(e) {
			let t=this;
			if (e.id) {
				this.checktype = e.checktype
				this.checkid = e.id
				this.showagain = e.showagain
				this.formData = {
					mfid: this.checkid,
					type: this.checktype
				}
				this.getxduser()
			} else {
				t.$t.message.toast('获取用户信息失败')
				this.goBack()
			}
			// #ifndef MP-WEIXIN
			this.isdd = true;
			// #endif

			// #ifdef MP-WEIXIN
			this.isdd = false;
			// #endif
		},
		onShow() {
			if (this.isopencar == true) {
				this.closeloading()
			}
		},
		methods: {
			// clear() {
			// 	let t = this;
			// 	console.log('clear=>clear')
			// 	t.$refs.upload.clear()
			// },
			showloading() {
				this.isopencar = true
				this.$t.message.loading('正在打开摄像头')
			},
			closeloading() {
				this.isopencar = false
				this.$t.message.closeLoading()
			},
			upsuccess(e) {
				let t = this;
				t.faceimg = e.url
				this.$t.message.loading('正在核对人像')
				this.$request({
					url: this.$api.user.checkface,
					method: 'POST',
					data: {
						image: t.faceimg,
						mfid: t.checkid,
						type: t.checktype
					}
				}).then(response => {
					t.$t.message.closeLoading()
					t.faceimg = ''
					if (response.code === 0) {
						//设置人脸检测用户ID
						t.$storage.setStorageSync('checkid', t.checkid);
						uni.redirectTo({
							url: t.return_url,
						});
					} else {
						t.$refs.upload.clear()
						t.$t.message.toast(response.msg)
					}
				}).catch(err => {
					t.faceimg = ''
					t.$t.message.closeLoading()
					t.$t.message.toast('核验失败，请重试')
					t.$refs.upload.clear()
				})
			},
			editface(e) {
				let t = this;
				t.againimg = e.url
				// console.log('againimg', t.againimg)
				this.$t.message.loading('修改中')
				this.$request({
					url: this.$api.xduser.edit,
					method: 'POST',
					data: {
						face: t.againimg,
						mfid: t.checkid,
					}
				}).then(response => {
					t.$t.message.closeLoading()
					if (response.code === 0) {
						t.$t.message.toast('更新成功')
						t.getxduser(false)
						// t.xduser.face = t.againimg
					} else {
						t.$refs.editf.clear()
						t.$t.message.toast(response.msg)
					}
				}).catch(err => {
					t.againimg = ''
					t.$refs.editf.clear()
					console.error(err)
				})
			},
			breakcheck() {
				// let t=this;
				// this.$t.message.loading('正在核对人像')
				// this.$request({
				// 	url: this.$api.user.checkface,
				// 	method: 'POST',
				// 	data: {
				// 		image: 'https://media.bjnews.com.cn/image/2021/03/08/5032928236267449779.jpg',
				// 		mfid: t.checkid,
				// 		type: t.checktype
				// 	}
				// }).then(response => {
				// 	t.$t.message.closeLoading()
				// 	t.faceimg = ''
				// 	if (response.code === 0) {
				// 		//设置人脸检测用户ID
				// 		t.$storage.setStorageSync('checkid', t.checkid);
						
				// 	} else {
				// 		t.$refs.upload.clear()
				// 		t.$t.message.toast(response.msg)
				// 	}
				// }).catch(err => {
				// 	t.faceimg = ''
				// 	t.$t.message.closeLoading()
				// 	t.$t.message.toast('核验失败，请重试')
				// 	t.$refs.upload.clear()
				// })
				
				return 
				//设置人脸检测用户ID
				this.$storage.setStorageSync('checkid', this.checkid);
				uni.redirectTo({
					url: this.return_url,
				});
			},
			uperror(e) {
				this.faceimg = ''
				this.$t.message.toast(e.msg)
			},
			uperror2(e) {
				this.againimg = ''
				this.$t.message.toast(e.msg)
			},
			//获取在册人员信息
			getxduser(showloading=true) {
				let t = this;
				if(showloading){
					this.$t.message.loading('加载中');
				}
				this.$request({
					url: this.$api.xduser.info,
					data: {
						mfid: t.checkid
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						t.xduser = response.info;
					}
				}).catch(err => {
					this.$t.message.closeLoading();
					uni.showModal({
						title: '提示',
						content: `获取人员信息失败,请重试`,
						showCancel: false,
						success() {
							t.goBack()
						}
					})
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		position: relative;
		min-height: 100vh;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.user_pic {
			height: 320rpx;
			width: 320rpx;
			border-radius: 50%;
			margin: 50rpx 0;
		}

		.userinfo {
			margin-bottom: 20rpx;
		}

		/* 背景图片 start */
		&__bg {
			z-index: -1;
			position: fixed;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					height: 420rpx;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			margin-top: 280rpx;
			width: 100%;
		}

		&__logo {
			height: 260rpx;
			width: 260rpx;
			border-radius: 50%;
			border: 50rpx solid #fff;
			top: 300rpx;
		}

		.facebtn {
			margin-top: 75rpx;
			margin-bottom: 39rpx;
			width: 650rpx;
			height: 77rpx;
			text-align: center;
			font-size: 31rpx;
			line-height: 77rpx;
			border-radius: 5rpx;
			box-shadow: 1rpx 10rpx 24rpx 0rpx rgba(60, 129, 254, 0.35);
		}




	}

	/deep/.input-placeholder {
		font-size: 24rpx;
		color: #838383;
	}
</style>